<template>
  <div class="app-container">
    <div v-if="truckDivShow">
    <div style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
    <!-- 多条件分页查询所需条件的form -->
    <el-form :inline="true"  :model="truckDto" class="demo-form-inline">
      <el-form-item label="任务编号">
        <el-input ref="inputRef" v-model="truckDto.license_plate" placeholder="请输入车牌号码"></el-input>
      </el-form-item>
      <el-form-item label="司机名称">
        <el-input ref="inputRef" v-model="truckDto.license_plate" placeholder="请输入司机名称"></el-input>
      </el-form-item>
      <el-form-item label="车队名称">
        <el-select v-model="truckDto.fleet_id" placeholder="请选择车队名称">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="item in fleet" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetValues">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <!-- end -->

    <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

    <!-- 添加车辆按钮 -->
    <el-button type="primary" @click="dataOperation('addTruck')" style="margin-left: 30px;margin-top: 30px">+新增车辆</el-button>
    <!-- end -->

      <div style="height: 20px"></div>

    <!-- table 用于展示项目建议信息 -->
    <el-table
      v-if="truckShow"
      v-loading="trucklistLoading"
      :data="trucklist"
      style="width: 96%;margin-left: 32px"
      :max-height="800"
      :row-style="{ height: '55px' }"
    >
      <el-table-column fixed label="车辆编号" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="品牌" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.brand }}
        </template>
      </el-table-column>
      <el-table-column label="车牌号码" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.licensePlate }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="车辆类型" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="所属车队" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.fleetName }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="GPS设备ID" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.deviceGpsId }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="准载重量(千克)" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.allowableLoad }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="准载体积(方)" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.allowableVolume }}
        </template>
      </el-table-column>
      <el-table-column prop="attention" label="过期状态" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? "正常":"已过期"}}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="车次编号" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.ttId }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="DetailsShow(scope.row.id)">详细信息</el-button>
          <el-button @click.native.prevent="open(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- end --->

      <div style="height: 50px;margin-bottom: 10px">

    <!-- 分页组件 -->
    <el-pagination
      background
      @current-change="change"
      @size-change="pageSizeChange"
      :current-page="truckPageNumber"
      :page-sizes="[10, 20, 40, 80]"
      :total="truckTotal"
      layout="total, prev, pager, next, sizes,jumper"
      style="text-align: center; font-size: 8px; margin-top: 15px"
    >
    </el-pagination>
    <!-- end -->
      </div>

    </div> <!-- 间隔 -->

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      size="50%"
      direction="ttb"
      :before-close="handleClose"
      style="position: fixed; top: 65%; left: 52%; transform: translate(-50%, -50%); width: 50%; max-width: 1200px;height: 800px;border-radius: 10px;"
    >
        <div v-if="truckView" style="margin-left: 70px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆类型" style="width: 285px" label-width="100px">
                <el-select v-model="form.truck_type_id" placeholder="请选择" style="width: 205px;">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="item in truck_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌号码" style="width: 285px" label-width="100px">
                <el-input type="text" v-model="form.license_plate" style="width: 205px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="所属车队" label-width="100px">
                <el-select v-model="form.fleet_id" style="width: 205px">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="item in fleet" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="GPS设备ID" label-width="100px">
                <el-input type="text" v-model="form.device_gps_id" style="width: 205px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="准载重量" label-width="100px">
                <el-input type="text" v-model="form.allowable_load" style="width: 205px">
                  <template v-slot:append>千克</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="准载体积" label-width="100px">
                <el-input type="text" v-model="form.allowable_volume" style="width: 205px">
                  <template v-slot:append>方</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆品牌" label-width="100px">
                <el-input type="text" v-model="form.brand" style="width: 205px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>
        <div v-if="licenseView" style="margin-left: 70px">
          <el-form ref="form" :model="TruckLicense" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="发动机编号" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="TruckLicense.engine_number" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整备质量" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="TruckLicense.overall_quality" style="width: 205px">
                    <template v-slot:append>千克</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="外廊尺寸" label-width="100px">
                  <el-input type="text" v-model="TruckLicense.outside_dimensions" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="核定载质量" label-width="100px">
                  <el-input type="text" v-model="TruckLicense.allowable_weight" style="width: 205px">
                    <template v-slot:append>千克</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="行驶证图片" label-width="100px">
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:9999/api/pd-base/truckLicense/uploadFile"
                    :auto-upload="false"
                    :on-success="addHandleAvatarSuccess"
                    :limit="1"
                    ref="uploadAdd">
                    <img v-if="TruckLicense.picture" :src="TruckLicense.pictuure" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="道路运输证号" label-width="100px">
                  <el-input type="text" v-model="TruckLicense.transport_certificate_number" style="width: 205px">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      <div style="position: absolute; bottom: 30px; right: 40px;">
        <el-button type="primary" @click="agree(logo)">确认</el-button>
        <el-button>取消</el-button>
      </div>
    </el-drawer>
    <!-- end -->
    </div>
    <div v-if="truckDetailsDivShow">
      <div style="background-color: white; width: 200px; height: 880px; border-radius: 10px; float: left;margin-left: 10px;text-align: center;">
        <el-link :underline="currentTab !== 'basic'" :disabled="currentTab === 'basic'" @click="handleClick('basic')" :style="{ color: currentTab === 'basic' ? '#ff8c00' : 'black' }" class="linkStyle">基本信息</el-link><br>
        <el-link :underline="currentTab !== 'license'" :disabled="currentTab === 'license'" @click="handleClick('license')" :style="{ color: currentTab === 'license' ? '#ff8c00' : 'black' }" class="linkStyle">行驶证信息</el-link><br>
        <el-link :underline="currentTab !== 'vehicle'" :disabled="currentTab === 'vehicle'" @click="handleClick('vehicle')" :style="{ color: currentTab === 'vehicle' ? '#ff8c00' : 'black' }" class="linkStyle">车次信息</el-link><br>
      </div>
      <div style="background-color: white; width: 1225px; height: 880px; border-radius: 10px; float: right;">
        <div v-if="baseShow">
          <div class="container">
            <h1 class="title">车辆基本信息</h1>
            <el-button type="danger" class="close-button" @click="goBack()">×</el-button>
          </div>
          <div style="margin-left: 100px;margin-top: 40px">
            <el-form ref="form" :model="TruckDetails" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="车辆编号" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.id" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车牌号码" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.license_plate" :disabled="disabledStatus"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属机构" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.agency" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属车队" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.fname" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="车型名称" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.tname" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆体积" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.allowable_volume" :disabled="disabledStatus">
                        <template v-slot:append>方</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="车辆载重" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.allowable_load" :disabled="disabledStatus">
                        <template v-slot:append>千克</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="过期状态" >
                    <el-select v-model="TruckDetails.status" style="width: 305px" :disabled="disabledStatus">
                      <el-option label="正常" :value="1"></el-option>
                      <el-option label="过期" :value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="工作状态" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.work_status" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="装载状态" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.load_status" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="10">
                  <el-form-item label="GPSID" style="width: 385px">
                    <el-input type="text" v-model="TruckDetails.device_gps_id" :disabled="disabledStatus"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <hr style="width: 90%; height: 1px; background-color: #cccccc;">
          <div style="text-align: center">
            <el-button type="primary" v-if="updateButton" @click="releaseButton()" style="margin-left: 30px;margin-top: 30px">编辑</el-button>
            <el-button type="primary" v-if="saveButton" @click="dataOperation('updateTruck')" style="margin-left: 30px;margin-top: 30px">保存</el-button>
            <el-button type="info" @click="recallButton()" style="margin-left: 30px;margin-top: 30px">取消</el-button>
          </div>
        </div>
        <div v-if="licenseShow">
          <div class="container">
            <h1 class="title">行驶证信息</h1>
            <el-button type="danger" class="close-button" @click="goBack()">×</el-button>
          </div>
          <div style="margin-left: 100px;margin-top: 40px">
            <el-form ref="form" :model="TruckLicense" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="行驶证号" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckLicense.id" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发动机号码" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckLicense.engine_number" :disabled="disabledStatus"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="注册时间" label-width="100px" style="width: 385px">
                    <el-date-picker :value-format="'yyyy-MM-dd'" type="date" v-model="TruckLicense.registration_date" :disabled="disabledStatus" style="width: 287px"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="强制报废日期" label-width="100px" style="width: 385px">
                    <el-date-picker :value-format="'yyyy-MM-dd'" type="date" v-model="TruckLicense.mandatory_scrap" :disabled="disabledStatus" style="width: 287px"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="整备质量" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckLicense.overall_quality" :disabled="disabledStatus">
                      <template v-slot:append>千克</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检验有效期" label-width="100px" style="width: 385px">
                    <el-date-picker :value-format="'yyyy-MM-dd'" type="date" v-model="TruckLicense.expiration_date" :disabled="disabledStatus" style="width: 287px"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="核定载质量" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckLicense.allowable_weight" :disabled="disabledStatus">
                      <template v-slot:append>千克</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="有效期" label-width="100px" style="width: 385px">
                    <el-date-picker :value-format="'yyyy-MM-dd'" type="date" v-model="TruckLicense.validity_period" :disabled="disabledStatus" style="width: 287px"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="道路运输证号" label-width="100px" style="width: 385px; ">
                    <el-input type="text" v-model="TruckLicense.transport_certificate_number" :disabled="disabledStatus"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>


              <h3>图片信息</h3>
                  <el-upload
                    class="avatar-uploader"
                    action="http://127.0.0.1:9999/api/pd-base/truckLicense/uploadFile"
                    :limit="1"
                    :on-success="updateHandleAvatarSuccess"
                    :on-change="handleChange"
                    :auto-upload="false"
                    ref="upload"
                    :disabled="disabledStatus">
                    <img v-if="TruckLicense.picture" :src="TruckLicense.picture" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
            </el-form>
          </div>
          <hr style="width: 90%; height: 1px; background-color: #cccccc;">
          <div style="text-align: center">
            <el-button type="primary" v-if="updateButton" @click="releaseButton()" style="margin-left: 30px;margin-top: 30px">编辑</el-button>
            <el-button type="primary" v-if="saveButton" @click="dataOperation('updateLicense')" style="margin-left: 30px;margin-top: 30px">保存</el-button>
            <el-button type="info" @click="recallButton()" style="margin-left: 30px;margin-top: 30px">取消</el-button>
          </div>
        </div>
        <div v-if="lineTruckNumShow">
          <div class="container">
            <h1 class="title">车次信息</h1>
            <el-button type="danger" class="close-button" @click="goBack()">×</el-button>
          </div>
          <div style="margin-left: 100px;margin-top: 40px">
            <el-form ref="form" :model="TruckNumberAndLine" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属线路" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckNumberAndLine.lname" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属车次" label-width="100px" style="width: 385px">
                    <el-input type="text" v-model="TruckNumberAndLine.tname" :disabled="disabledStatus"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <hr style="width: 90%; height: 1px; background-color: #cccccc;">
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {getAllTruckType} from '@/api/truck/truck_type'
import { getAllFleet } from '@/api/truck/fleet'
import { getAllFleetByAgency } from '@/api/fleet/fleet_manage'
import {getTruckListByPage} from '@/api/truck/truck_manage'
import { queryTruckLicenseByTruckId } from '@/api/truck/truck_license'
import {queryTruckDetailsById} from '@/api/truck/truck_manage'
import { deleteTruck } from '@/api/truck/truck_manage'
import { queryTruckNumberAndLineById } from '@/api/truck/truck_manage'
import { updateTruck } from '@/api/truck/truck_manage'
import { updateTruckLicense } from '@/api/truck/truck_license'
import { addTruck } from '@/api/truck/truck_manage'
import user from '@//store/modules/user'

export default {
  data(){
    return {
      fileList:[],
      addCount:0,
      truckView:true,
      licenseView:false,
      saveButton:false,
      updateButton:true,
      disabledStatus:true,
      lineTruckNumShow:false,
      licenseShow:false,
      baseShow:true,
      truckId:'',
      currentTab: 'basic',
      truckDivShow:true,
      truckDetailsDivShow: false,
      selectedValue: '',
      fleet:[],
      truck_type:[],
      logo: 'add',
      truckShow:true,
      form: {
        id:null,
        truck_type_id:null,
        fleet_id:null,
        brand:null,
        license_plate:null,
        device_gps_id:null,
        allowable_load:null,
        allowable_volume:null,
        truck_license_id:null,
        status:1
      },
      title:'添加项目',
      drawer: false,
      truckDto:{
        license_plate:'',
        truck_type_id:null,
        fleet_id:null
      },
      trucklist: null,
      trucklistLoading: true,
      truckPageNumber: 1,
      truckPageSize: 10,
      truckTotal: 0,
      options:[],
      TruckDetails:{
        id:null,
        agency:null,
        fName:null,
        license_plate:null,
        tName:null,
        allowable_load:null,
        allowable_volume:null,
        device_gps_id:null,
        work_status:null,
        load_status:null,
        status:null
      },
      TruckLicense:{
        id: null,
        engine_number: null,
        registration_date: null,
        mandatory_scrap: null,
        expiration_date: null,
        overall_quality: null,
        allowable_weight: null,
        outside_dimensions: null,
        validity_period: null,
        transport_certificate_number: null,
        picture: null
      },
      TruckNumberAndLine:{
        id:null,
        tName:null,
        lName:null
      },
      userId:null,
    }
  },
  created() {
    this.userId = user.state.id
    this.init()
  },
  methods:{
    handleChange(file){
      console.log('file', URL.createObjectURL(file.raw));
    },
    //多条件分页查询
    query(){
      this.truckPageNumber = 1;
      this.init()
    },
    //初始化
    init(){
      this.queryTruckType()
      this.queryAllFleet()

      this.trucklistLoading = true

      const truckDto = {
        pageNum: this.truckPageNumber,
        pageSize: this.truckPageSize,
        fleet_id: this.truckDto.fleet_id,
        truck_type_id: this.truckDto.truck_type_id,
        license_plate: this.truckDto.license_plate,
        agency_id: this.userId
      }

      console.log(truckDto)

      getTruckListByPage(truckDto).then(response=>{
        this.trucklist = response.data.list
        this.trucklistLoading = false
        this.truckTotal = response.data.total
        this.truckShow = true
      })
    },
    //根据车辆编号查询相关详细信息
    handleClick(tab) {
      this.currentTab = tab;
      this.disabledStatus = true
      this.updateButton = true
      this.saveButton = false
      if (tab === "basic"){
        this.licenseShow = false
        this.lineTruckNumShow = false
        this.baseShow = true
        queryTruckDetailsById(this.truckId).then(response =>{
          this.TruckDetails = response.data;
          this.TruckDetails.work_status = this.TruckDetails.work_status === 5 ? '空闲' : this.TruckDetails.work_status === 6 ? '空闲' : '工作中';
          this.TruckDetails.load_status = this.TruckDetails.load_status === 1 ? '半载' : this.TruckDetails.load_status === 2 ? '满载' : '空载';
        })
      }else if (tab === "license"){
        this.licenseShow = true
        this.baseShow = false
        this.lineTruckNumShow = false
        queryTruckLicenseByTruckId(this.truckId).then(response =>{
          this.TruckLicense = response.data
        })
      }else {
        this.licenseShow = false
        this.baseShow = false
        this.lineTruckNumShow = true
        queryTruckNumberAndLineById(this.truckId).then(response =>{
          this.TruckNumberAndLine = response.data
        })
      }
    },
    //回滚详细信息参数
    goBack(){
      this.truckDivShow = true
      this.truckDetailsDivShow = false
      this.TruckDetails={
          id:null,
          agency:null,
          fName:null,
          license_plate:null,
          tName:null,
          allowable_load:null,
          allowable_volume:null,
          device_gps_id:null,
          work_status:null,
          load_status:null,
          status:null
      }
      this.TruckLicense={
        id: null,
        engine_number: null,
        registration_date: null,
        mandatory_scrap: null,
        expiration_date: null,
        overall_quality: null,
        allowable_weight: null,
        outside_dimensions: null,
        validity_period: null,
        transport_certificate_number: null,
        picture: null
      }
    },
    //释放
    releaseButton(){
      this.updateButton = false
      this.saveButton = true
      this.disabledStatus = false
    },
    //撤销
    recallButton(){
      this.updateButton = true
      this.saveButton = false
      this.disabledStatus = true
    },
    //详细信息页面展示
    DetailsShow(id){
      this.truckId = id;
      this.handleClick("basic")
      this.truckDivShow = false
      this.truckDetailsDivShow = true;
    },
    //查询车辆类型信息
    queryTruckType(){
      getAllTruckType().then(response=>{
        this.truck_type = response.data
      })
    },
    //查询车队信息
    queryAllFleet(){
      getAllFleetByAgency(this.userId).then(response=>{
        this.fleet = response.data
      })
    },
    //重置分页查询条件
    resetValues() {
      this.$refs.inputRef.clear(); // 清空输入框的值
      this.truckDto.truck_type_id=''
      this.truckDto.fleet_id='' // 清空下拉列表框的选中项
    },
    //分页
    change(val){
      this.truckPageNumber = val;
      this.init();
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.truckPageSize = newPageSize;

      this.init()
    },
    //详细信息的修改
    dataOperation(logo) {
      if (logo === "addTruck") {
        this.drawer = true
      }else if (logo === "updateTruck") {
        updateTruck(this.TruckDetails).then(response => {
          if (response.code === "200") {
            this.$message({
              message: response.message,
              type: 'success'
            });
            this.truckDetailsDivShow = false;
            this.truckDivShow = true;
            this.init()
          } else {
            this.$message.error(response.message);
          }
        })
      }
      else if (logo === "updateLicense") {
        this.$refs.upload.submit();
      }
    },
    //添加车辆信息
    agree(){
      this.addCount+=1
      this.truckView = false
      this.licenseView = true
      if(this.addCount===2){
        this.$refs.uploadAdd.submit();
      }
    },
    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form = {
            te_id:0,
            sportName: '',
            gender: null,
            intensity: null,
            equivalent: '',
            age:this.age1+this.age2,
            time: '',
            part: null,
            method: '',
            notes: '',
            status:null
          }
          this.truckView = true
          this.licenseView = false
          this.addCount = 0
          done();
        })
        .catch(_ => {});
    },
    //删除车辆信息(其实就是修改车辆状态)
    excise(truck){
      deleteTruck(truck).then(response=>{
        this.$message(response.message)
        this.init()
      })
    },
    //删除信息的弹出框
    open(id) {
      const truck={
        id:id,
        status:0
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要删除此车辆吗? '),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.excise(truck)
            done()
          } else {
            done();
          }
        }
      })
    },
    //添加行驶证时文件上传成功后
    addHandleAvatarSuccess(res) {
      this.TruckLicense.picture = res.data
      const addTruckDto = {
        truckBean: this.form,
        truckLicenseBean: this.TruckLicense
      }
      addTruck(addTruckDto).then(response => {
        if (response.code === "200") {
          this.addCount = 0
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
          this.drawer = false
          this.form = {
            id:null,
            truck_type_id:null,
            fleet_id:null,
            brand:null,
            license_plate:null,
            device_gps_id:null,
            allowable_load:null,
            allowable_volume:null,
            truck_license_id:null,
            status:1
          }
          this.TruckLicense = {
            id: null,
            engine_number: null,
            registration_date: null,
            mandatory_scrap: null,
            expiration_date: null,
            overall_quality: null,
            allowable_weight: null,
            outside_dimensions: null,
            validity_period: null,
            transport_certificate_number: null,
            picture: null
          }
          this.truckView = true
          this.licenseView = false
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //修改行驶证时文件上传成功后
    updateHandleAvatarSuccess(res) {
      this.TruckLicense.picture = res.data
      updateTruckLicense(this.TruckLicense).then(response => {
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.truckDetailsDivShow = false;
          this.truckDivShow = true;
          this.TruckLicense = {
            id: null,
            engine_number: null,
            registration_date: null,
            mandatory_scrap: null,
            expiration_date: null,
            overall_quality: null,
            allowable_weight: null,
            outside_dimensions: null,
            validity_period: null,
            transport_certificate_number: null,
            picture: null
          }
          this.truckView = true
          this.licenseView = false
          this.init()
        } else {
          this.$message.error(response.message);
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .app-container{
    width: 100%;
    height: 908px;
    background-color: #f1f1f1; /* 设置背景颜色 */
  }
.linkStyle{
  font-size: 14px;
  margin: 10px 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
  .container {
    display: flex;
    align-items: center;
  }

  .title {
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 20px; /* 调整按钮与标题之间的间距 */
    color: black;
  }

  .close-button {
    margin-left: 900px; /* 将按钮推到最左边 */
  }
  .el-form-item .el-form-item__label {
    width: auto; /* 自适应宽度 */
    white-space: nowrap; /* 不换行 */
  }

  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #99a9bf;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
